Why do these three have alt=""? As proper links they should be clickable and with empty alt text it will be ignored by screen readers, right?

#1406 (comment)

"While descriptive text is imperative to describe images to those who can’t see them, these images are purely decorative and add no value to someone not seeing the page. Use alt=”” instead so the experience with a screen reader is less cluttered."

These images are not decorative. If they are the primary (and in this case sole) component within an <a> tag then they are by definition not decorative, they are serving a purpose as a hyperlink to the code jam pages and as such must have appropriate alt text.

These images are not decorative. If they are the primary (and in this case sole) component within an <a> tag then they are by definition not decorative, they are serving a purpose as a hyperlink to the code jam pages and as such must have appropriate alt text.

I'm just following what the issue says, but I can add it if needed.

I'm just following what the issue says, but I can add it if needed.

Yes, the issue generally covers the situations where that is a problem, but this is not one of them.

Hypothetically for the following content:

<div id="main">
  <!-- where this is a decorative graphic that holds no useful user information -->
  <img src="/some/graphic.png" />
</div>

The image there is decorative, is not clickable, serves no purpose and thus is not worth having alt text for, adding alt text here would just be noise for a screen reader. So, we'd add alt="":

<div id="main">
  <!-- where this is a decorative graphic that holds no useful user information -->
  <img src="/some/graphic.png" alt="" />
</div>

However, if the <img> is within an <a> then that image is clickable, and if there is nothing else in that <a> then there is nothing else to indicate to a user what they are clicking.

For example, basing things off your current PR, we have something like the following:

<a href="/login">
  <img src="/login_graphic.png" alt="" />
</a>

There is no descriptive text inside the <a>, so a screenreader cannot look at this and say anything to the user along the lines of "This is a login button", it has no idea how to describe the content because we have explicitly disabled the alt text.

It's very important to keep the descriptive text where the object is not decorative, obviously an image that is acting as a button/link is not decorative since clicking it takes you somewhere.

Break down your elements into three categories: informational, decorative or actions.

• You can have buttons that are actions, they take you somewhere when you click them. These obviously must be eithered labelled with text elements or be an image element with alt text.
• You can have images that may contain information or may add information to content surrounding them (even if accessibility tools cannot read the image content), these also obviously need alt text to symbolise to a screenreader/user using accessibility tooling what the content of that image is.
• Decorative objects are objects where you could remove them from the document and the content and actions from the document would remain the same, you can gain the same information from the document and use the same actions to continue browsing to other areas of the webpage.

Decorative objects do not need accessibility text because it is not important that tools to help with visual impairment describe elements of a webpage that have no use to users who are visually impaired (for example, some fancy SVG background doesn't need explaining to a user who has no way to see the background).

On it, probably will have a new commit in like 1-2 days.

Fixed.